<template>
  <div>
    <div style="margin: 2%">
      <div>
        <el-form label-position="top">
          <el-row>
            <el-col :span="6" :offset="2">
              <el-form-item label="查询长度">
                <el-input type="number" v-model="barReq.cnt" @change="(val)=>parseInt(val)"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="查询时间粒度">
                <el-select v-model="barReq.granularity">
                  <el-option
                    v-for="item in granularityOption"
                    :key="item[0]"
                    :label="item[0]"
                    :value="item[1]"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-button style="margin-top: 4%" type="success" @click="loadBar"> 确认并再次查询</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div style="width:96%;height:500px;margin-left: 4%" ref="bar">

    </div>
  </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs'
import Vue from 'vue';
import state from '../store/index'

export default {
  name: "DispBar",
  mounted() {
    this.loadBar()
  },
  computed: {},
  data() {
    return {
      statData: null,
      barChart: null,
      barReq: {
        cnt: 10,
        granularity: 1
      },
      granularityOption: [
        ["每分", 1],
        ["每小时", 60],
        ["每天", 60 * 24],
        ["每月(以30天计)", 60 * 24 * 30]
      ],

    }
  },
  methods: {
    loadBar() {
      axios.get("/api/stats", {
        params: this.barReq
      }).then(res => {
        this.statData = this.generateData(res.data.data.reverse());
        console.log(this.statData)
        this.initEchart()
      }).catch(err => {
        console.log(err)
      })
    },

    initEchart() {
      this.barChart = this.$echarts.init(this.$refs.bar)
      this.barChart.setOption(
        this.generateOption(this.statData)
      )
    },

    generateData(reqData) {
      var ret = {
        maxDev: 2,
        maxTopic: 1   ,
        xTics: reqData.map(data => this.$global.num2date(data.timestamp)),
        data: [
          reqData.map(data => data.devNum),
          reqData.map(data => data.activeDevNum),
          reqData.map(data => data.topicNum),
          reqData.map(data => data.activeTopicNum),
        ]
      };
      ret.maxDev += Math.max.apply(null, ret.data[0])
      ret.maxTopic += Math.max.apply(null, ret.data[2])
      return ret;

    },


    generateOption(statData) {
      var colors = ['#5470C6', '#91CC75', '#EE6666', '#ece431'];
      var data = statData.data;
      return {
        color: colors,

        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          right: '20%'
        },
        legend: {
          data: ['总设备数', '活跃设备数', '总话题数', '活跃话题数']
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            data: statData.xTics
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '设备数',
            min: 0,
            max: statData.maxDev,
            position: 'right',
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[0]
              }
            },
            axisLabel: {
              formatter: '{value} 台'
            }
          },
          {
            type: 'value',
            name: '话题数',
            min: 0,
            max: statData.maxTopic,
            position: 'left',
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[2]
              }
            },
            axisLabel: {
              formatter: '{value}'
            }
          },
        ],
        series: [
          {
            name: '总设备数',
            type: 'line',
            yAxisIndex: 0,
            data: data[0]
          },
          {
            name: '活跃设备数',
            type: 'line',
            yAxisIndex: 0,
            data: data[1]
          },
          {
            name: '总话题数',
            type: 'line',
            yAxisIndex: 1,
            data: data[2]
          },

          {
            name: '活跃话题数',
            type: 'line',
            yAxisIndex: 1,
            data: data[3]
          },
        ]
      }
    }

  },
}
</script>

<style scoped>

</style>
